<template>
  <div class="home">
    <p class="home_title">QQ音乐</p>
    <!-- 布局 -->
    <!-- 内容区域 -->
    <!-- 底部 -->
    <MusicItem v-if="showFoot"></MusicItem>
    <!-- 组件2 -->

    <VideoItem v-else></VideoItem>

    <!-- 当前播放的音乐 -->
    <Cmusic @showPops="showPops"></Cmusic>

    <div class="home-foot">
      <!-- flex布局写项目 -->

      <div @click="selectActive(true)" :class="showFoot ? 'activeStyle' : ''">
        <i class="iconfont icon-yinle home-left"> </i>
        <span>音乐</span>
      </div>
      <div @click="selectActive(false)" :class="!showFoot ? 'activeStyle' : ''">
        <i class="iconfont icon-shipin1 home-right"> </i>
        <span>视频</span>
      </div>
    </div>
    <Popup v-if="popShow" @offPopShow="offPopShow"></Popup>
  </div>
</template>

<script>
// 局部组件使用
import MusicItem from "../components/Music/Music.vue";
import VideoItem from "../components/video/Video.vue";
import Cmusic from "../components/Cmusic.vue";
import Popup from "../components/Popup.vue";
export default {
  // components: { MusicItem },
  // 组件中的data是一个函数 =》 提供一个作用域
  data() {
    return {
      showFoot: true, // 如果为真就是显示 音乐 反之计算显示视频
      showCplay: false, //播放组件是否显示
      popShow: false, // 判断弹性框组件是否显示
    };
  },
  //注册组件
  components: {
    MusicItem,
    VideoItem,
    Cmusic,
    Popup,
  },
  mounted() {
    console.log(this.$store);
    this.getStoreData();
  },
  methods: {
    showPops() {
      // 弹性组件显示 popshow
      this.popShow = true;
    },
    // 关闭组件
    offPopShow() {
      this.offPopShow = false;
    },
    getStoreData() {
      if (!this.$store.state.sUrl) {
        // 无数据
        this.showCplay = false;
        // 有数据
      } else {
        this.showCplay = true;
      }
    },
    selectActive(value) {
      if (value) {
        this.showFoot = value;
      } else {
        this.showFoot = value;
      }
    },
  },
};
</script>

<style scoped lang="less">
.home_title {
  text-align: center;
}
.home {
  // 底部的样式
  font-size: 100px;
  padding: 40px;
  background: rgb(250, 250, 250);
  .home-foot {
    position: fixed;
    align-items: center; //flex 内容剧中（height）
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    height: 220px;
    border-top: 2px solid red;
    background: rgb(255, 255, 255);
    > div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666;
      span {
        font-size: 80px;
        text-align: center;
      }
      i {
        font-size: 100px;
        margin-right: 20px;
      }
      //选中的样式
      &.activeStyle {
        color: rgb(33, 212, 155);
      }
    }
  }
}
</style>